@function r($px) {
    @return $px/40*1rem;
}

@mixin imgs {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

@mixin imgh {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

@mixin liangh {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@mixin duoh {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@mixin sih {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

@mixin wuh {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

@mixin dongh {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

@mixin danh {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body {
    top: 50px;
}

@media (min-width: 1200px) {
    .container {
        width: 940px;
    }
}

.AboutUs {
    .container-fluid {
        .logos {
            padding-top: r(7);
            margin-right: r(20);
            height: 100%;
        }
        //头部图片
        .header_img {
            width: 100%;
            background: #bcb449;
            .header_img_box {
                width: 100%;
                padding-top: 25.69444444444444%;
                position: relative;
                overflow: hidden;
                img {
                    @include imgh;
                }
            }
        }
        //公司简介
        .CompanyProfile {
            .CompanyProfile_box {
                width: r(826);
                margin: 0 auto;
                overflow: hidden;
                margin: r(90) auto r(55) auto;
                display: flex;
                justify-content: space-between;
                .CompanyProfile_left {
                    width: r(570);
                    h4 {
                        width: r(640);
                        font-size: r(36);
                        color: #2a2a2a;
                        @include danh;
                    }
                    span {
                        width: 100%;
                        margin-top: r(24);
                        display: block;
                        font-size: r(21);
                        color: #2a2a2a;
                        line-height: r(30);
                        @include liangh;
                    }
                    p {
                        width: 100%;
                        font-size: r(14);
                        color: #2a2a2a;
                        line-height: r(30);
                        text-indent: 2em;
                        margin-top: r(16);
                        @include sih;
                    }
                }
                .CompanyProfile_right {
                    width: r(226);
                    .CompanyProfile_right_img {
                        width: r(226);
                        padding-top: 58.4070796460177%;
                        overflow: hidden;
                        position: relative;
                        border-radius: r(12);
                        margin-top: r(168);
                        text-align: justify;
                        @include sih;
                        img {
                            @include imgs;
                        }
                    }
                }
            }
        }
        //人才招聘
        .recruitment {
            background: #8cc11f;
            padding: r(90) 0 r(80) 0;
            .recruitment_box {
                width: r(874);
                margin: 0 auto;
                overflow: hidden;
                display: flex;
                float: none;
                justify-content: space-between;
                padding-left: 0;
                padding-right: 0;
                .recruitment_left {
                    width: r(570);
                    h4 {
                        width: r(640);
                        font-size: r(36);
                        color: #fff;
                        margin-bottom: r(30);
                        @include danh;
                    }
                    p {
                        font-size: r(14);
                        color: #fff;
                        line-height: r(30);
                        margin-top: r(10);
                    }
                }
                .recruitment_right {
                    width: r(224);
                    padding-top: r(58);
                    .MailBox {
                        width: r(220);
                        height: r(50);
                        text-align: center;
                        line-height: r(50);
                        background: #fff;
                        color: #8cc11f;
                        border-radius: r(6);
                        margin-top: r(8);
                    }
                    p {
                        font-size: r(14);
                        color: #fff;
                        line-height: r(30);
                        margin-top: r(10);
                    }
                }
            }
        }
        //游戏引擎
        .EngineDevelopment {
            padding: r(20) 0 r(20) 0;
            .EngineDevelopment_box {
                width: r(826);
                float: none;
                margin: 0 auto;
                overflow: hidden;
                padding-bottom: r(60);
                margin-top: r(70);
                border-bottom: 1px solid #d2d2d2;
                h4 {
                    width: r(640);
                    font-size: r(26);
                    color: #8cc11f;
                    margin-bottom: r(30);
                    @include danh;
                }
                span {
                    width: 100%;
                    display: block;
                    font-size: r(18);
                    color: #2a2a2a;
                    line-height: r(30);
                    @include liangh;
                }
                ul {
                    margin: r(10) 0 r(5) 0;
                    list-style: decimal;
                    li {
                        list-style: decimal;
                        width: 100%;
                        font-size: r(14);
                        color: #2a2a2a;
                        line-height: r(30);
                        text-indent: 2em;
                        @include sih;
                    }
                }
            }
        }
        .ContactInformation{
            background: #f4f4f4;
            .ContactInformation_box{
                width: r(826);
                float: none;
                margin: 0 auto;
                overflow: hidden;
                padding-bottom: r(60);
                .ContactInformation_title{
                    width: r(640);
                    font-size: r(26);
                    color: #8cc11f;
                    margin: r(50) 0 r(40) 0;
                    @include danh;
                }
                .ContactInformation_content{
                    ul{
                        width: r(812);
                        display: flex;
                        justify-content: space-between;                       
                        flex-flow:wrap-reverse;
                        li{
                            width: r(394);
                            height: r(104);
                            border-radius: r(6);
                            border: 1px solid #e3e3e3;
                            background: #fff;
                            display: flex;
                            align-items: center;
                            margin-bottom: r(26);
                            @include danh;
                            .ContactInformation_content_img{
                                width: r(70);
                                padding-top: 14.8936170212766%;
                                border-radius: r(6);
                                margin: 0 r(10);
                                position: relative;
                                overflow: hidden;
                                img{
                                    @include imgs;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    //底部
    .footer_box {
        height: r(113);
        background: #3b3b3b;
        .footer_content {
            width: r(860);
            margin: 0 auto;
            display: flex;
            justify-content: space-between; 
            .footer_content_left {
                width: r(350);
                margin-top: r(34);
                .footer_content_left_top {
                    a {
                        color: #a1a3ab;
                        font-size: r(14);
                    }
                }
                .footer_content_left_bottom {
                    margin-top: r(10);
                    color: #a1a3ab;
                    font-size: r(12);
                    p {
                        @include danh;
                    }
                }
            }
            .footer_content_right {
                width: r(155);
                margin-top: r(38);
                margin-right: r(15);
                ul {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}

@media only screen and (max-width:768px) {
    .container-fluid {
        .logos {
            margin-left: r(60);
            margin-top: r(20);
            height: 100%;
        }
    }
    //公司簡介
    .AboutUs .container-fluid .CompanyProfile .CompanyProfile_box {
        width: 100%;
        display: block;
    }
    .AboutUs .container-fluid .CompanyProfile .CompanyProfile_box .CompanyProfile_left {
        width: 100%;
    }
    .AboutUs .container-fluid .CompanyProfile .CompanyProfile_box .CompanyProfile_left h4 {
        width: 100%;
        font-size: r(120);
        color: #2a2a2a;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: r(60);
    }
    .AboutUs .container-fluid .CompanyProfile .CompanyProfile_box .CompanyProfile_left span {
        display: block;
        font-size: r(60);
        color: #2a2a2a;
        margin-bottom: r(120);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: initial;
    }
    .AboutUs .container-fluid .CompanyProfile .CompanyProfile_box .CompanyProfile_left p {
        font-size: r(37);
        color: #2a2a2a;
        margin-bottom: r(30);
        letter-spacing: 1px;
        line-height: r(60);
        letter-spacing: r(4);
        text-align: justify;
        width: 100%;
    }
    .AboutUs .container-fluid .CompanyProfile .CompanyProfile_box .CompanyProfile_right {
        width: 100%;
    }
    .AboutUs .container-fluid .CompanyProfile .CompanyProfile_box .CompanyProfile_right .CompanyProfile_right_img {
        width: 60%;
        margin: 0 auto;
        padding-top: 50%;
    }
    //人才招聘
    .AboutUs .container-fluid .recruitment .recruitment_box {
        width: 100%;
        display: block;
        float: none;
        padding-left: 15px;
        padding-right: 15px;
    }
    .AboutUs .container-fluid .recruitment .recruitment_box .recruitment_left {
        width: 100%;
        float: none;
    }
    .AboutUs .container-fluid .recruitment .recruitment_box .recruitment_left h4 {
        width: 100%;
        font-size: r(120);
        color: #fff;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: r(60);
        float: none;
    }
    .AboutUs .container-fluid .recruitment .recruitment_box .recruitment_left p {
        font-size: r(37);
        color: #fff;
        margin-bottom: r(30);
        letter-spacing: 1px;
        line-height: r(60);
        letter-spacing: r(4);
        text-align: justify;
        width: 100%;
    }
    .AboutUs .container-fluid .recruitment .recruitment_box .recruitment_right {
        width: 100%;
        float: none;
    }
    .AboutUs .container-fluid .recruitment .recruitment_box .recruitment_right .MailBox {
        width: r(500);
        height: r(100);
        line-height: r(100);
        border-radius: r(12);
        margin-bottom: r(40);
    }
    .AboutUs .container-fluid .recruitment .recruitment_box .recruitment_right p {
        font-size: r(37);
        color: #fff;
        margin-bottom: r(30);
        letter-spacing: 1px;
        line-height: r(60);
        letter-spacing: r(4);
        text-align: justify;
        width: 100%;
    }
    //底部
    .AboutUs .footer_box .footer_content {
        width: 80%;
        padding-top: r(60);
    }
    .AboutUs .footer_box .footer_content .footer_content_left {
        width: 80%;
        transform: scale(.8);
        margin-top: 14px;
    }
    .AboutUs .footer_box {
        height: auto;
        width: 100%;
        overflow: hidden;
    }
    .AboutUs .footer_box .footer_content .footer_content_right {
        width: 20%;
        margin-top: 0;
    }
    .AboutUs .footer_box .footer_content .footer_content_right ul li {
        width: r(80);
        height: r(80);
        padding-top: r(108);
        img {
            width: 100%;
        }
    }
    .AboutUs .footer_box .footer_content {
        height: 100px;
    }
    .AboutUs .footer_box .footer_content .footer_content_left .footer_content_left_bottom p {
        font-size: r(30);
    }
    .AboutUs .footer_box .footer_content .footer_content_left .footer_content_left_top a {
        font-size: r(40);
        line-height: r(40);
    }
    .AboutUs .footer_box .footer_content {
        margin: 1px;
        width: 92%;
    }
    //引擎开发
    .AboutUs .container-fluid .EngineDevelopment .EngineDevelopment_box{
        width: 100%;
        padding-top: r(20);
    }
    .AboutUs .container-fluid .EngineDevelopment .EngineDevelopment_box h4{
        width: 100%;
        font-size: r(80);
        color: #8cc11f;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: r(60);
        float: none;
    }
    .AboutUs .container-fluid .EngineDevelopment .EngineDevelopment_box span{
        display: block;
        font-size: r(60);
        color: #2a2a2a;
        margin:r(60) 0 r(40) 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: initial;
    }
    .AboutUs .container-fluid .EngineDevelopment .EngineDevelopment_box ul li{
        font-size: r(37);
        color: #2a2a2a;
        margin-bottom: r(30);
        letter-spacing: 1px;
        line-height: r(60);
        letter-spacing: r(4);
        text-align: justify;
        width: 100%;
        text-indent:0;
    }
    //联系方式
    .AboutUs .container-fluid .ContactInformation .ContactInformation_box{
        width: 100%;
        padding-bottom: r(120);
        padding-top: r(30);
    }
    .AboutUs .container-fluid .ContactInformation .ContactInformation_box .ContactInformation_title{
        width: 100%;
        font-size: r(120);
        color: #2a2a2a;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .AboutUs .container-fluid .ContactInformation .ContactInformation_box .ContactInformation_content ul{
        width: 100%;
        display: block;
    }
    .AboutUs .container-fluid .ContactInformation .ContactInformation_box .ContactInformation_content ul li{
        display: block;
        float: left;
        width: r(650);
        height: r(160) ;
        font-size: r(20);
        line-height: r(160);
        &:nth-child(2n){
            float: right;
        }
    }
    .AboutUs .container-fluid .ContactInformation .ContactInformation_box .ContactInformation_content ul li .ContactInformation_content_img{
        float: left;
        width: 22%;
        padding-top: 29%;
        margin-right: r(16);
    }
}